<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--
    <script src="echarts.common.min.js"></script>
	-->
	 <script src="echarts.min.js"></script>
</head>
<body>
<div id="div" style="height: 500px;width: 100%"></div>
<div id="div1" style="height: 80px;width: 100px"></div>
<script>

    function dotChart(){
        var nodeDom = document.getElementById('div');
        var dotChart = echarts.init(nodeDom);

        var option = {
            title: {
                text: '单品售罄',
                left: 'center'
            },
			grid:{
                //left:0
            },
            legend: {
                data: ['售罄时间', '补货时间'],
                bottom: 0,
                left: 'center',
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} {b} : {c}"
            },
            xAxis: {
               // type : 'category',
                splitLine: {
                    show:true
                },
                boundaryGap: false,
                data : ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7']
            },
            yAxis: {
                gridIndex: 0, min: 0, max: 24,
                //type : 'category',
                splitLine: {
                    show:true
                },
                //interval:1,
                boundaryGap: false
                //min:'dataMax',
               // data : [0, 1, 2, 3, 4, 5, 6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
                //data : [0, 1.0, 2.0, 3.0, 4.0, 5.0, 6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0]
                //data : ['0', '1', '2', '3', '4', '5', '6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']

            },
            series: [
                {   name:'售罄时间',
                    type: 'scatter',
                    itemStyle:{
                        normal:{
                            color:'#ed7d31'
                        }
                    },
                    data:[
                        [ '9/1',{value:2.5,time:'2:30'}],
                        [  '9/2',  9.5],
                        [  '9/3',  11.2],
                        [  '9/4',  12],
                        [  '9/5',  13],
                        [  '9/6',  14],
                        [  '9/7',  24]
                    ]
                },
                {
                    name:'补货时间',
                    type: 'scatter',
                    itemStyle:{
                        normal:{
                            color:'#5b9bd5'
                        }
                    },
                    data:[
                        [  '9/1',  1],
                        [  '9/2',  2],
                        [  '9/3',  3],
                        [  '9/4',  4],
                        [  '9/5',  5],
                        [  '9/6',  6],
                        [  '9/7',  7]
                    ]
                }
            ]
        };
        dotChart.setOption(option);
    }
    dotChart();


/*
    function dotLabel(){
        var nodeDom = document.getElementById('div1');
        var dotLabel = echarts.init(nodeDom);
        var option = {
            color: ['#003366', '#006699', '#4cabce', '#e5323e'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                selectedMode:false,
                data: ['售罄时间', '补货时间']
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    show:false
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show:false
                }
            ],
            series: [
                {
                    name: '售罄时间',
                    type: 'bar',
                    itemStyle:{
                        normal:{
                            color:'#ed7d31'
                        }
                    }
                },
                {
                    name: '补货时间',
                    type: 'bar',
                    itemStyle:{
                        normal:{
                            color:'#5b9bd5'
                        }
                    }
                }
            ]
        };
        dotLabel.setOption(option);
    }
  0  dotLabel();
  */
</script>
</body>
</html>